<template>
  <view class="myPage">
    <common-header
      :isCanBack="true"
      titleName=" "
      :className="headerClassName"
    ></common-header>
    <view class="container" v-if="info.id">
      <view class="top_swiper">
        <view class="swiper">
          <view class="swiper-item">
            <image :lazy-load="true" :src="img_baseUrl + info.coverImgPath"></image>
          </view>
        </view>
      </view>

      <view class="detail_wrap">
        <view class="titBox">
          <view class="titBox_lf">
            <text>{{ info.title }}</text>
          </view>
          <view class="titBox_time"> {{ info.createTime }}</view>
        </view>
        <view class="locBox_wrap">
          <view class="locBox" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/introduction-detail-position-bg.png)`}" @click="goToMap">
            <view class="locBox_lf">
              <text>{{ info.placeName ? info.placeName : "" }}</text>
              <view>{{ currDistance }}</view>
            </view>
            <view class="locBox_rt">
              <img
                :src="`${img_baseUrl}/statics/std/static/new/introduction-detail-position-location.png`"
                alt=""
              />
              <!-- <text>去这里</text> -->
            </view>
          </view>
        </view>
      </view>
      <view class="description">
        <mp-html :content="info.articleText" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
      </view>
    </view>
  </view>
</template>

<script>
import commonHeader from "@/components/commonHeader.vue";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import { requestGet } from "@/utils/request";
import {currentPosition, distance} from '@/utils/index.js';

export default {
  components: {
    commonHeader,
    mpHtml,
  },
  props: ["id"],
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      headerClassName: "",
      info: {},
      currDistance: ''
    };
  },
  onLoad: function (options) {
    if (this.id) {
      this._getDetail();
    }
  },
  mounted() {},
  methods: {
    _getDetail() {
      requestGet(`/home/content/detail/${this.id}`, {}, "/baseplatform")
        .then((res) => {
          if (res.code === 200) {
            res.data.articleText = res.data && res.data.articleText ? res.data.articleText.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
            this.info = res.data || {};
            this.getDistance();
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    onPageScroll(e) {
      if (e.scrollTop > 100) {
        this.headerClassName = "headerClass";
      } else {
        this.headerClassName = "";
      }
    },
    goToMap(){
      const detail = this.info;
      if(!detail.latitude || !detail.longitude || detail.latitude == "" || detail.longitude == ''){
        uni.showToast({
          title: "暂无具体位置信息",
          icon: "none",
        });
        return 
      }
      uni.openLocation({
      			latitude: Number(detail.latitude),
      			longitude: Number(detail.longitude),
            name: detail.title || '',
            address: detail.title || '',
      			success: function () {
      				console.log('openLocation=======success',detail);
      			},
            fail: function (res) {
              console.log('openLocation=====fail', res);
            }
      		});
    },
    async getDistance(){
       let myPosition = null;
       try {
         myPosition = await currentPosition();
       } catch (error) {
         console.log('定位失败:', error);
         return
       }
      console.log('myPositon=====', myPosition);
      if(myPosition.latitude && myPosition.longitude && this.info.latitude && this.info.longitude){
        distance(myPosition.latitude, myPosition.longitude,this.info.latitude,this.info.longitude).then(distance => {
          console.log("distance========", distance)
          this.currDistance = Number(distance) > 1000 ? (Number(distance)/1000).toFixed(2) + 'km' : distance + 'm';
        }).catch(err => {
          console.log("distance========err", res)
          this.currDistance = "";
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.myPage {
  position: relative;

  .description {
    width: 100vw;
    height: auto;
    box-sizing: border-box;
    padding: 0 40rpx;
  }

  .detail_wrap {
    box-sizing: border-box;
    padding: 40rpx 32rpx 0;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    transform: translateY(-40rpx);
    background: #fff;

    .titBox {
      margin-bottom: 48rpx;

      .titBox_lf {
        text {
          font-size: 48rpx;
          font-weight: 700;
          color: rgba(0, 0, 0, 0.9);
          line-height: 68rpx;
        }
      }

      .titBox_time {
        margin-top: 8rpx;
        font-size: 24rpx;
        font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 34rpx;
      }
    }

    .locBox {
      width: 100%;
      height: 120rpx;
      border-radius: 24rpx;
      // background: url("https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png");
      background-size: cover;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 20rpx 24rpx 16rpx;

      .locBox_lf {
        margin-right: 20rpx;
        flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        text {
          font-size: 28rpx;
          font-weight: 500;
          color: #5f6f86;
          line-height: 44rpx;
        }

        view {
          font-size: 24rpx;
          font-weight: 400;
          color: #777f8f;
          line-height: 40rpx;
        }
      }

      .locBox_rt {
        width: 64rpx;
        height: 64rpx;
        background: #ffffff;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 32rpx;
          height: 32rpx;
          display: block;
        }

        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #2187ff;
          line-height: 32rpx;
        }
      }
    }
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .top_swiper {
      position: relative;

      .dots {
        position: absolute;
        bottom: 40rpx;
        width: 100%;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .dot_item {
          width: 20rpx;
          height: 4rpx;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          margin-right: 12rpx;
        }

        .dot_item_active {
          width: 20rpx;
          height: 4rpx;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          margin-right: 12rpx;
          background: #ffffff;
        }
      }
    }

    .swiper {
      height: 750rpx;
      width: 100%;

      .swiper-item {
        display: block;
        height: 100%;
        width: 100%;
        text-align: center;

        image {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>
